//阶段失能率统计图
<template>
  <div class="chart_stage" id="chart_stageRate"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      // 失能率统计
      snl_tjny: [],
      snl_qingdu: [],
      snl_zhong: [],
      snl_zhongdu: []
    }
  },
  mounted () {
    this.snlGetData()
  },
  methods: {
    // 失能率请求数据
    snlGetData () {
      this.$http.get(this.$api.SNLTJ.snltj, true).then(result => {
        let arr = result.data.result
        for (const value of arr.values()) {
          this.snl_tjny.push(value.tjny)
          this.snl_qingdu.push(value.qdsnl)
          this.snl_zhong.push(value.zdsnl)
          this.snl_zhongdu.push(value.zzsnl)
        }
        this.stageRateFun(this.snl_tjny, this.snl_qingdu, this.snl_zhong, this.snl_zhongdu)
      })
    },
    // 阶段失能率统计图
    stageRateFun (arrX, arrY1, arrY2, arrY3) {
      let myChart = echarts.init(document.getElementById('chart_stageRate'))
      myChart.setOption({
        title: {
          text: '失能率统计图',
          textStyle: {
            color: '#fff',
            fontSize: 30
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {}
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // data: ['浦东', '宝山', '崇明', '奉贤', '虹口', '黄浦', '嘉定', '金山', '静安', '闵行', '普陀', '青浦', '松江', '徐汇', '杨浦', '长宁'],
          data: arrX,
          axisLine: {
            lineStyle: {
              color: '#00FFFF'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff', // 坐标字体颜色
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff', // 坐标字体颜色
              fontSize: 14
            }
          },
          axisLine: {
            lineStyle: {
              color: '#00FFFF'
            }
          },
          itemStyle: {
            normal: {
              color: '#f5a142'
            }
          }
        },
        series: [
          {
            name: '轻度失能率（%）',
            type: 'line',
            symbolSize: 5, // 拐点的大小
            itemStyle: {
              normal: {
                borderColor: '3ac425', // 边框颜色
                color: '#3ac425', // 折线上标记点的颜色 和 图例的颜色
                lineStyle: {
                  width: 1,
                  color: '#3ac425' // 折线的颜色
                }
              }
            },
            data: arrY1
          },
          {
            name: '中度失能率（%）',
            type: 'line',
            symbolSize: 5, // 拐点的大小
            itemStyle: {
              normal: {
                borderColor: '59F9FA', // 边框颜色
                color: '#59F9FA', // 折线上标记点的颜色 和 图例的颜色
                lineStyle: {
                  width: 1,
                  color: '#59F9FA' // 折线的颜色
                }
              }
            },
            data: arrY2
          },
          {
            name: '重度失能率（%）',
            type: 'line',
            symbolSize: 5, // 拐点的大小
            itemStyle: {
              normal: {
                borderColor: '00a0e9', // 边框颜色
                color: '#00a0e9', // 折线上标记点的颜色 和 图例的颜色
                lineStyle: {
                  width: 1,
                  color: '#00a0e9' // 折线的颜色
                }
              }
            },
            data: arrY3
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
  .chart_stage {
    width: 95%;
    height: 95%;
    margin: 2.5rem auto 0;
  }
</style>
